import React from 'react'
import { Table, Icon, Switch, Radio, Form, Divider, Popconfirm,Pagination } from 'antd';
import {inject, observer} from "mobx-react/index";
import "../../../../style/less/formStyle.less"

@inject("store")
@observer
class RequireList extends React.Component {
    componentWillMount = () => {
        this.props.store.actions.getRequire(this.props.status)
    }
    render(){
        const store = this.props.store
        const list=store.requireList
        const page=store.page
        const expandedRowRender = (record) => {
            const columns = [
                { title: '店铺名称', dataIndex: 'name', key: 'name' ,  render: (text,record2) => <a href={"/trade/detail/"+record2.shopId}>{text}</a>,},
                { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
                { title: '方案描述', dataIndex: 'describe', key: 'describe' },
                { title: '附件', dataIndex: 'annex', key: 'annex' },
                { title: 'requireId', dataIndex: 'requireId', key: 'requireId' },
                {
                    title: '操作',
                    key: 'operation',
                    render: (record2,text) => (
                        <span className="table-operation">
                             <Popconfirm title="确定接受此服务商吗" onConfirm={()=>store.actions.accept(record2.shopId,record.id)}>
                                 <a href="javascript:;">接受</a>
                             </Popconfirm>
                        </span>
                    ),
                },
            ];
            const data = store.actions.getApplyPerson(record.id);
            return (
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                />
            );
        };
        const columns = [{
            title: '标题',
            dataIndex: 'title',
            key: 'title',
            width: 250,
            render: (text,record) => <a href={`/admin/activityDetail/${record.id}`}>{text}</a>,
        }, {
            title: '服务类型',
            dataIndex: 'serviceType',
            key: 'serviceType',
            width: 150,
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width:200
        }, {
            title: 'Action',
            key: 'action',
            width: 200,
            render: (text, record) => (
                <span>
                  <Popconfirm title="确定取消吗" onConfirm={()=>store.actions. cancelRequire(record.id)}>
                    <a href="javascript:;">取消需求</a>
                  </Popconfirm>
                  <Divider type="vertical" />
                  <a href={`/console/require/editRequire/${record.id}`}>修改需求</a>
                </span>
            ),
        }];
        return(
            <div>
                <Table
                    className="components-table-demo-nested"
                    columns={columns}
                    expandedRowRender={expandedRowRender}
                    dataSource={list}
                    pagination={{
                        total: list.length,
                        pageSize: page.pageSize,
                        pageSizeOptions:[10,15,20],
                        defaultPageSize: page.pageSize,
                        showSizeChanger: true,
                        showQuickJumper: true,
                        onShowSizeChange:(page,pageSize)=>store.actions.setShowSize(page,pageSize),
                        onChange:(page)=>store.actions.setCurrentPage(page)
                    }}

                />
            </div>
        )
    }
}
export default  RequireList